import { WritableComputedRef } from "vue";

export interface IPageConfigProps<T> {
  pageConfig: T
}

export interface IPageConfigEmits<T> {
  (e: "update:page-config", value: T): void;
  (e: "change-style", value: T): void;
}

export type TPageConfigProps<T> = IPageConfigProps<T> // alias
export type TPageConfigEmits<T> = IPageConfigEmits<T> // alias

export function usePageConfig<T>(props: IPageConfigProps<T>, emits: IPageConfigEmits<T>) {
  const pageConfig:WritableComputedRef<T> = computed({
    set(newValue) {
      emits("update:page-config", newValue)
    },
    get() {
      return props.pageConfig
    }
  })

  watch(pageConfig, (newValue) => {
    emits("change-style", newValue);
  }, {
    deep: true
  });

  return {
    pageConfig
  }
}
